<template name='goodsMarkRecord'>

<view style="display: flex;    height: 100%;">
	<!-- -右边 -->
	<view class="box-infos font12  " >


		<!-- 内容体 -->
		<view class="content-box ">
			<!-- 增加、删除 -->
			<view class="top-but menu-scroll-w">
				<view class="top-but-box">
			
					<!-- 搜索 -->
					<view class="searchBox floatleft">
						<view class="riskTitle">货位:</view>
						<input
						v-model="search.word" 
						placeholder="输入货位号进行搜索"
						placeholder-class="placeholder-class"
						@confirm="loadData(true)"
						class="search-ipu w200"
						/>
						<view class="delete-ipu" v-if="search.word!=''" @click="search.word=''">
							<img src="../../static/img/delete-1.png"></img>
						</view>
					</view>
					<view @click="$common.noMultipleClicks('loadData',loadData,true)" 
					class="rightButttom" >
						<img src="../../static/img/search.png" class="ico" ></img>
						刷新
					</view>
				
				</view>
			</view>
			<view class="boxsss" >
				<table v-if="resData.list!=undefined && resData.list.length>0">
					<!-- 表头 -->
					<thead>
						<tr >
							<th  class="centers ">
								
								<checkbox
									border-color="#333333" activeborderColor="#333333" activeBackgroundColor="#333"
									:checked="checkbox.select" 
									@click="choose_all"
									style="transform:scale(0.7);"
								/>
								序
							</th>
							<th class="  ">
								<view class="centers flex">
									<view>货位号</view>
									<view class="sort-button ">
										<view class="desc"  @click="sort.value='position_desc',loadData(true);"></view>
										<view class="asc"   @click="sort.value='position_asc',loadData(true);"></view>
									</view>
								</view>
							</th>
							<th  class="centers  ">
								<view class="centers flex">
									<view>商品数</view>
									<view class="sort-button ">
										<view class="desc"  @click="sort.value='goodsCount_desc',loadData(true);"></view>
										<view class="asc"   @click="sort.value='goodsCount_asc',loadData(true);"></view>
									</view>
								</view>
							</th>
							<th  class="centers  " :title="$global.title.m40">
								<view class="centers flex">
									<view>商品销量</view>
									<view class="sort-button ">
										<view class="desc"  @click="sort.value='sales_desc',loadData(true);"></view>
										<view class="asc"   @click="sort.value='sales_asc',loadData(true);"></view>
									</view>
								</view>
							</th>
							<th  class="centers">
								操作
							</th>
						</tr>
					</thead>
					<tbody>
						<!-- 内容 -->
						<checkbox-group @change="checkbox_change" style="display: contents;">
							<tr v-for="(item,index) in resData.list"
							:key="index"
							@click="TabcheckedIndex = index"
							:class="checkbox.checkbox_status.includes(item.id) ? 'goods-list-select':''"
							>
								<td selectable="true"   class="centers weight">
									<view class="flex centers">
										<checkbox  class="centers  font12"
											:value="item.position.toString()" 
											border-color="#333333" activeborderColor="#333333" 
											activeBackgroundColor="#333"
											:checked="checkbox.checkbox_status.includes(item.id)" 
											style="transform: scale(0.7);"
										/>
										{{index+1}}
									</view>
								</td>
								<td selectable="true"  class="centers weight" >
									{{item.position}}
								</td>
								<td selectable="true"   class="centers weight">
									{{item.goodsCount}}
								</td>
								<td selectable="true"   class="centers weight">
									{{$common.formatNumber(item.salesSum) }}
								</td>
								<td selectable="true"   class="centers ">
									<view class="flex centers ">
										<view class="cursor alter margin font12" 
										@click="updatePositionAll(item.position)">修改货位</view>
										<view class="cursor alter margin font12" 
										@click="$req.printPositionLabel(item.position)">打印标签</view>
										<view class="cursor alter margin font12" 
										@click="openGoods(item.position)">查看商品</view>
									</view>
								</td>
							</tr>
						</checkbox-group>
					</tbody>
				</table>
				<!-- 暂无数据 -->
				<empty v-if="resData.list==undefined || resData.list.length==0"></empty>
				<!-- end -->
				
			</view>

			<!-- 更多 TabcheckedIndex -->
			<view class="xd-main flex" v-if="TabcheckedIndex>=0" >
				<!-- 单选商品的处理 -->
				<view class="w100 flex xd-box" >
					
					
					<button class="but but-color1 color2"  
					:disabled="isSelectAll==false"
					@click="PrintGoodsPosition()">
						打印标签
					</button>
					
				</view>
				
				
			</view>
			
			<!-- 更多 end -->
				
			<pages 
			:sum="page.sum"
			:current="page.nowPage"
			@updatePage="updatePage"
			v-if="OnPageSearch==undefined || OnPageSearch==''"
			></pages>
			<!-- end -->
		</view>
	
		<!-- 商品页面 -->
		<uni-popup ref="pageGoods" type="center" :title="pageSend.position">
			<shopping_admin :isPop="false" :OnPageSearchGoodsPosition="pageSend.position"  class="h100"></shopping_admin>
		</uni-popup>
		<!-- end -->
	
	</view>


</view>
</template>

<script>

	import pages from "@/components/admin-components/pages.vue"
	import empty from "@/components/admin-components/empty.vue"
	import shopping_admin from "@/components/goods/goods.vue"


	export default{
		name:'goodsMarkRecord',
		components: {
			pages,
			empty,shopping_admin
		},

		data(){
			return{
				isSelectAll:false,
				checkbox:{//多选框
					checkbox_status:[],
					select_all:false,
					select:false,
				},
				TabcheckedIndex:-1,//当前选中项
				search:{
					word:'',
					user_id:''
				},
				sort:{
					value:''
				},
				page:{
					
					nowPage:1,//当前页数
					pageCount:1,//总页数
					maxCount:0,
					sum:0,
					pageCounts:15,
				},
				resData:{
					list:[]
				},
				pageSend:{
					position:''
				},
			}
		},
		 // 此处定义传入的数据
		props: {
		    OnPageSearch: '',//其他页面传递进来直接搜寻的，不是菜单打开的
			
		},
		created() {
			let that = this
			if(that.OnPageSearch != undefined && that.OnPageSearch != ''){
				that.search.user_id = that.OnPageSearch
			}
			that.loadData(true);
		},
		methods:{
			PrintGoodsPosition(){
				var content = this.checkbox.checkbox_status;
				this.$req.printPositionLabel(content)
				this.choos_all_close()
			},
			/**
			 * 回调当前选中的表项
			*/
			checkbox_change(e){
				console.log("checkbox_change",e)
				this.isSelectAll = e.detail.value.length>=1 ? true :false
				this.checkbox.checkbox_status = e.detail.value
			},
			/**
			 * 全选中
			*/
			choose_all(){
				console.log("choose_all")
				this.checkbox.checkbox_status = []
				if(this.checkbox.select_all == false){
					this.checkbox.select_all  = true
					this.checkbox.select      = true
					this.isSelectAll          = true
					for (var i=0;i<this.resData.list.length;i++) {
						this.checkbox.checkbox_status.push(this.resData.list[i].id)
					}

				}else{
					this.choos_all_close()
				}
			},
			// 取消全选中
			choos_all_close(){
				this.checkbox.select_all = false
				this.checkbox.checkbox_status = []
				this.checkbox.select = false
				this.isSelectAll = false
			},
			openGoods(position){
				this.pageSend.position = position
				this.$refs.pageGoods.open()
			},
			/**
			 * 货位号修改
			 * type : goods_list|goods_search
			*/
			updatePositionAll(position){
				var that = this
				uni.showModal({
					title:'请输入有关的商品货位号',
					editable:true,
					content:position,
					placeholderText:'此操作不可逆。修改后有关的商品信息将会被修改！',
					success: (e)=>{
						if(e.confirm){
							var content = e.content
							if(content.length<=0){
								return
							}
						
							that.$common.get_request(
								{
									type:'updatePositionAll',
									position:position,
									value:content,
								},
								(res)=>{
									that.$common.toast(res.msg)
								}
							);
						}
					}
				})
			},
			/**
			 * 分页器回调
			*/
			updatePage(pageName,pageCount){
				
				var that = this
				that.page.nowPage = pageName
				that.page.pageCounts = pageCount
				that.loadData(false)
			},
	
			/**
			 * 读取
			 * type : goods_list|goods_search
			*/
			loadData(isUpdatePage=true){
				var that = this
				
				this.choos_all_close()
				that.page.nowPage = isUpdatePage == true ? 1:that.page.nowPage;
				
				that.$common.get_request(
					{
						type:'GetPosition',
						search:that.search.word,//搜索内容
						pages:that.page.nowPage,//当前位于页数
						page_count:that.page.pageCounts,//当前请求页的数量
						sort:that.sort.value
					},
					
					(res)=>{
						
						that.page.sum  = res.sum
						if(isUpdatePage == true){
						that.page.nowPage  = 1
						}
						that.resData = res
					}
				);
			},
		}
	}
</script>

<style>
	.pagesBox{
		display: flex;
		margin: 10px;
		font-size: 14px;
	}

	.swiper{
		display: flex;
		background-color: #f5f7fa;
		text-align: center;
		cursor: pointer;
		margin-left: 10px;
		margin-right: auto;
	}
	.swiper .box{
		font-size: 14px;
		padding: 10px 20px;
	}

	.swiper  .m{
		background-color: #fff;
	}
	.swiper .box:hover,.swiper  .select{
		background-color: #0060b9;
		color: #ffff;
		font-weight: 400;
	}
	.checkGoodsSend{
		background-color: #fff;
		padding: 10px 0px;
		margin-right: auto;
		margin-left: 10px;
	}
	.checkGoodsSend .but{
		background-color: #0060b9;
		color: #ffff;
		font-weight: 400;
		font-size: 14px;
		padding: 5px 20px;
	}
</style>
